<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .checkBox{width: 20px;height: 20px;position: relative;}
    .checkBox span{width: 10px;height: 20px;border-radius: 5px 5px 0 0;background: #ccc;position: absolute;}
    .checkBox span:nth-child(1){transform: rotate(45deg);left: 8px;}
    .checkBox span:nth-child(2){transform: rotate(-45deg);}

    /* 复选项选中之后的高亮样式 */
    .checkBox[data-checked=true] span{background: red;}
  </style>
</head>
<body>

  <div>
    <input type="checkbox" class="check" name="hobby" value="篮球">
    <input type="checkbox" class="check" name="hobby" value="足球">
    <input type="checkbox" class="check" name="hobby" value="排球">
    <input type="button">
  </div>


  <div class="checkBox"  data-checked="false">
    <span></span>
    <span></span>
  </div>

</body>
<script>
  
  // var check = document.querySelector(".check")
  // check.onchange = function(){
  //   console.log(check, check.checked);
  // }
  
  var checkBox = document.querySelector(".checkBox")

  checkBox.onclick = function(){
    if( checkBox.dataset.checked === "true" ){
      checkBox.dataset.checked = "false";
      checkBox.checked = false;
    }else{
      checkBox.dataset.checked = "true";
      checkBox.checked = true;
    }

    console.log(checkBox.checked);
  }
  

  

</script>
</html>